<template>
	<view class="tab1 box">
		<img src="../../static/img/bg.png" alt="" srcset="" width="100%" />
		<view class="tab1text">

			<!-- <transition-group name="slide" mode="out-in"> -->
			<view v-for="(item, index) in swiperData" :key="index" class="slide-item ">
				<transition name="slide">
					<view :style="{ height: '166px' }" v-if="item.show" class="slide-content">
						<view class="multiple-tag">{{ item.multiple }}
						</view>
						<span class="money-unit">￥</span>
						<b class="money-num">{{ item.money }}</b>
					</view>
				</transition>

			</view>
			<!-- </transition-group> -->
		</view>

		<view class="tab1btn">
			<view class="copy-btn-warp">
				<button class="copy-btn animate__pulse" @click="copyText">
					点击复制口令
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getEle,inspectEle
	} from "@/api/userchannel.js";
	import {
		isIos,
		toElmApp,queryStringToObject
	} from '../../utils/eleutil.js'

	export default {
		data() {
			return {
				swiperData: [{
						money: 15,
						multiple: "已翻2.7倍",
						show: true
					},
					{
						money: 19,
						multiple: "已翻3.0倍",
						show: false
					},
					{
						money: 13,
						multiple: "已翻2.6倍",
						show: false
					},
					{
						money: 10,
						multiple: "已翻1.5倍",
						show: false
					},
					{
						money: 12,
						multiple: "已翻2.7倍",
						show: false
					},
					{
						money: 20,
						multiple: "已翻2.1倍",
						show: false
					},
					{
						money: 18,
						multiple: "已翻3倍",
						show: false
					},
				],
				currentIndex: 0,
				slideTranslate: 100,
				clipboardText: "0复zんι口~令 666:/＄dxC5Wed＄~.饿了么App【快來領外賣紅包，最高20元，人人都有哦~】",
				eleData: {},
			};
		},
		mounted() {
			const params = queryStringToObject(window.location.href);
			console.info('params======>' + params.code)
			let sid = params.code
			if (sid) {
				this.inspect(sid)
			} else {
				uni.showToast({
					title: '参数不完整!',
					icon: 'none',
					duration: 2000
				});
			}
			if (sid) {
				this.getEleData(sid);
			}
			this.startInterval();
		},
		methods: {
			inspect(sid) {
				inspectEle(sid).then((res) => {
					if (res.code == 200) {
						if (!res.data) {
							console.log("获取SID失败");
							uni.showToast({
								title: 'sid无效!',
								icon: 'none',
								duration: 2000
							});
						}
						console.log("获取SID", res.data);
					} else {
						console.log("获取SID失败");
						uni.showToast({
							title: 'code无效!',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			startInterval() {
				setInterval(() => {
					this.currentIndex = (this.currentIndex + 1) % this.swiperData.length;
					this.updateShowStatus();
				}, 5000);
			},
			updateShowStatus() {
				this.swiperData.forEach((item, index) => {
					item.show = index === this.currentIndex;
				});
			},
			getEleData(sid) {
				getEle(sid).then((res) => {
					console.info(res);
					this.eleData = res.data.alibaba_alsc_union_eleme_promotion_officialactivity_get_response;
					this.clipboardText = this.eleData.data.link.eleme_word;
				});
			},
			copyText() {
				let me = this;
				uni.setClipboardData({
					data: this.clipboardText,
					success: function() {
						me.showCopiedMessage();
					},
				});

				// 跳转到饿了么app
				if (isIos()) {
					setTimeout(() => {
						toElmApp(this.eleData.data.link.h5_url);
					}, 500)
				}
			},
			showCopiedMessage() {
				wx.showModal({
					title: "提示",
					content: "口令复制成功，请打开[饿了么APP]领取",
					showCancel: false,
					confirmText: "确定",
					success: function(res) {
						console.info(res)
						if (res.confirm) {
							// 用户点击了确定按钮
							// 在这里可以执行其他操作
							// 跳转到饿了么app
							if (isIos()) {
								setTimeout(() => {
									toElmApp(this.eleData.data.link.h5_url);
								}, 500)
							}
						}
					},
				});
			},
		},
	};
</script>
<style>
	.swiper-container {
		height: 200px;
		/* 设置容器的高度，根据实际需求进行调整 */
		overflow: hidden;
		/* 隐藏超出容器高度的内容 */
	}

	.slide-container {
		position: relative;
		height: 100%;
	}

	.slide-item {
		display: flex;
		justify-content: center;
		position: absolute;
		/* 绝对定位 */
		bottom: 0;
		/* 从底部开始排列 */
		width: 100%;
		height: 100%;
	}

	.slide-content {
		transition: transform 0.5s;
		/* 添加过渡效果 */
		transform: translateY(100%);
		/* 初始位置，向下偏移 100% */
	}

	.slide-enter-active,
	.slide-leave-active {
		transition: transform 0.5s;
		/* 添加过渡效果 */
	}

	.slide-enter {
		transform: translateY(-100%);
		/* 进入动画，向上偏移 100% */
	}

	.slide-leave-to {
		transform: translateY(100%);
		/* 离开动画，向下偏移 100% */
	}

	.box {
		width: 96vw;
		margin: 0 2vw;
	}

	.tab1 {
		position: relative;
		width: 100%;
	}

	.tab1 img {
		border-radius: 10px;
	}

	.tab1text {
		position: absolute;
		top: 9px;
		color: #f53c28;
		width: 100%;
	}


	.tab1btn {
		position: absolute;
		top: 520px;
		color: #f53c28;
		width: 100%;
	}

	.animate__pulse {
		animation-name: pulse;
		animation-timing-function: ease-in-out;
	}

	@keyframes pulse {
		0% {
			transform: scaleX(1);
		}

		50% {
			transform: scale3d(1.05, 1.05, 1.05);
		}

		to {
			transform: scaleX(1);
		}
	}

	.copy-btn {
		display: block;
		width: 310px;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
		background: linear-gradient(180deg, #fe7429 0%, #ff370e 100%);
		border-radius: 40px;
		color: #fff;
		font-weight: 700;
		font-size: 18px;
		text-align: center;
		animation-duration: 0.8s;
		animation-iteration-count: infinite;
		box-shadow: none;
		outline: none;
		border: none;
		cursor: pointer;
		z-index: 10;
		border: 1px solid #ff591d;
	}

	.multiple-tag {
		position: absolute;
		right: -84px;
		top: 0;
		width: 22.66667vw;
		background: url("../../static/img/multiple_tag.png") no-repeat top;
		background-size: cover;
		background-color: transparent;
		font-size: 3.2vw;
		text-align: center;
		transform: scale(0.8);
		transform-origin: 0 50%;
		line-height: 8.53333vw;
	}

	.money-unit {
		font-size: 9.33333vw;
	}

	.money-num {
		font-size: 15.73333vw;
		font-weight: bolder;
	}
</style>